<template>
    <page-box class="custom-page-box">
        <template v-slot:header>
            <ask-breadcrumb>
                <template v-for="(item, index) in $getBreadCrumbsName($route.path)">
                    <ask-breadcrumb-item :key="index" v-if="item.path" :to="'/' + item.path">{{ item.meta.title }}</ask-breadcrumb-item>
                    <ask-breadcrumb-item :key="index" v-else>{{ item.meta.title }}</ask-breadcrumb-item>
                </template>
            </ask-breadcrumb>
        </template>
        <page-search>
            <el-form :inline="true" ref="form" :model="form">
                <page-search-column class="tab-card">
                    <el-tabs
                        type="card"
                        v-model="form.tabs"
                        @tab-click="checkTask"
                    >
                        <el-tab-pane name="1">
                            <span slot="label">待填报的任务</span>
                        </el-tab-pane>
                        <el-tab-pane name="2">
                            <span slot="label">抄送我的任务</span>
                        </el-tab-pane>
                    </el-tabs>
                </page-search-column>
                <page-search-column class="tab-column" v-if="form.tabs === '1'">
                    <el-tabs
                        v-model="form.status"
                        class="theme-gray"
                        @tab-click="handleClick">
                        <el-tab-pane label="进行中" name="1"></el-tab-pane>
                        <el-tab-pane label="已完成" name="2"></el-tab-pane>
                    </el-tabs>
                </page-search-column>
            </el-form>
        </page-search>
        <div class="task-manage-container" :class="form.tabs === '1' ? 'tab1' : 'tab2'">
            <el-table
                v-if="form.tabs === '1' && tableData.length"
                :key="form.status"
                class="pbb__table"
                header-cell-class-name="pbb__table-thead"
                cell-class-name="pbb__table-thead-cell"
                row-class-name="pbb__table-thead-row"
                :data="tableData"
                style="width: 100%;height: 100%;overflow-y: auto;">
                <el-table-column
                    label="序号"
                    align="center"
                    type="index"
                    width="60">
                </el-table-column>
                <el-table-column
                    prop="status"
                    label="任务状态"
                    width="120"
                    v-if="form.status === '1'">
                    <template slot-scope="scope">
                        <span class="green" v-if="scope.row.status !== 1">已完成</span>
                        <span
                            class="blue"
                            v-else-if="new Date(scope.row.endDate).getTime() - new Date().getTime() > 24 * 60 * 60 * 1000">
                            待填报
                        </span>
                        <span
                            class="red"
                            v-else-if="new Date(scope.row.endDate).getTime() - new Date().getTime() <= 0">
                            逾期{{ Math.ceil(Math.abs((new Date(scope.row.endDate).getTime() - new Date().getTime()) / (24 * 60 * 60 * 1000))) }}天
                        </span>
                        <span class="yellow" v-else>即将到期</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="名称">
                    <template slot-scope="scope">
                        <el-link type="primary" @click="toDetail(scope.row)">{{ scope.row.name }}</el-link>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="dataCount"
                    width="120"
                    label="已采集数量">
                </el-table-column>
                <el-table-column
                    prop="creator"
                    width="120"
                    label="下发人">
                </el-table-column>
                <el-table-column
                    prop="creatorDepartmentName"
                    label="下发科室">
                </el-table-column>
                <el-table-column
                    prop="createTime"
                    label="下发时间">
                </el-table-column>
                <el-table-column
                    prop="endDate"
                    label="截止时间">
                    <template slot-scope="scope">
                        {{ new Date(scope.row.endDate).format('yyyy-MM-dd') }}
                    </template>
                </el-table-column>
                <el-table-column
                    label="状态"
                    v-if="form.status === '2'">
                    <template slot-scope="scope">
                        {{ scope.row.deleted ? "已删除" : "已完成" }}
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    width="200"
                    v-if="form.status === '1'">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" @click="fillInRow(scope.row)">填报</el-button>
                        <el-divider direction="vertical"></el-divider>
                        <el-popover
                            placement="bottom"
                            width="260"
                            trigger="click">
                            <div class="step-import">
                                <div class="step1">
                                    <el-link type="primary" @click="downTemplate(scope.row)">下载模板</el-link>
                                    <div>请先下载模板，根据模板填写后导入。<br>部分复杂表格格式暂不支持导入，请完成导入后进入详情页面手动添加。</div>
                                </div>
                                <upLoad-normal
                                    :accept="'.xlsx'"
                                    :isSingle="true"
                                    @httpRequest="httpRequest">
                                    <el-link type="primary" @click="importRow(scope.row)">导入excel</el-link>
                                </upLoad-normal>
                            </div>
                            <el-button slot="reference" size="mini" type="text">导入</el-button>
                        </el-popover>
                        <el-divider direction="vertical"></el-divider>
                        <el-button size="mini" type="text" @click="submitRow(scope.row)">提交</el-button>
                        <el-divider direction="vertical"></el-divider>
                        <el-button size="mini" type="text" @click="assignRow(scope.row)">指派</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-table
                v-if="form.tabs === '2' && tableData.length"
                :key="form.tabs"
                class="pbb__table"
                header-cell-class-name="pbb__table-thead"
                cell-class-name="pbb__table-thead-cell"
                row-class-name="pbb__table-thead-row"
                :data="tableData"
                style="width: 100%;height: 100%;overflow-y: auto;">
                <el-table-column
                    label="序号"
                    align="center"
                    type="index"
                    width="60">
                </el-table-column>
                <el-table-column
                    prop="formName"
                    label="任务名称"
                    width="140">
                </el-table-column>
                <el-table-column
                    prop="realityFillCount"
                    width="120"
                    label="总任务采集数">
                </el-table-column>
                <el-table-column
                    prop="creatorName"
                    width="120"
                    label="下发人">
                </el-table-column>
                <el-table-column
                    prop="creatorDepartment"
                    label="下发科室">
                </el-table-column>
                <el-table-column
                    prop="createTime"
                    label="下发时间">
                </el-table-column>
                <el-table-column
                    label="操作"
                    width="80">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" @click="toDetail(scope.row)">查阅</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <ask-empty-text
                style="min-height: 400px;"
                v-if="!tableData.length">
            </ask-empty-text>
        </div>
        <template v-slot:footer v-if="total > 0">
            <pagination
                :total="total"
                :page.sync="pageIndex"
                :limit.sync="pageSize"
                :pageSizes="[10,20,30]"
                @pagination="getTable"
            />
        </template>
    </page-box>
</template>

<script lang="ts">
import { Component, Mixins } from "vue-property-decorator";
import UpLoadNormal from "@/components/upload-normal/index.vue";
import { dialogSelect } from "@/views/process-manage/src/components/person-selection/index";
import DownLoadTemplateUpLoadMixins from "./mixins";
import { State } from "vuex-class";
import { localStorage } from "@/utils";

@Component({
    name: "DeclareCollectionTaskNotAlive",
    components: {
        UpLoadNormal
    }
})
export default class DeclareCollectionTask extends Mixins(DownLoadTemplateUpLoadMixins) {
    @State(state => state.authArea) authArea: any;
    @State(state => state.user.userInfo) user: any;

    form: any = {
        status: "1",
        tabs: "1"
    };

    // 数据总数
    total = 0;
    // 每页数量
    pageSize = 10;
    // 当前页码
    pageIndex = 1;
    // 表格数据
    tableData = [];

    created() {
        this.form.tabs = this.$route.query.tabs || '1';
        this.initPage();
    }

    initPage() {
        this.checkTask();
    }

    checkTask() {
        this.pageIndex = 1;
        if (this.form.tabs === "1") {
            this.getTable();
        } else {
            this.getReceivedTable();
        }
    }

    async getReceivedTable() {
        const res = await this.$server["task/duplicateList"]({
            data: {
                pageSize: this.pageSize,
                currentPage: this.pageIndex
            }
        });
        if (res.data.code === 200) {
            this.tableData = res.data.data ? res.data.data.records : [];
            this.total = res.data.data.total;
        } else {
            this.tableData = [];
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    // 查询表格
    async getTable(type?: any) {
        if (type === "toDetail") {
            const row = this.tableData.filter(
                (item: any) => item.formId === this.currentForm.formId
            );
            this.toDetail(row[0]);
        }
        const res = await this.$server["task/getTable"]({
            data: {
                // status: this.form.status || "0",
                status: Number(this.form.status),
                taskKind: 2,
                pageSize: this.pageSize,
                currentPage: this.pageIndex
            }
        });
        if (res.data.code === 200) {
            this.tableData = res.data.data ? res.data.data.records : [];
            this.total = res.data.data.total;
        } else {
            this.tableData = [];
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    resetForm(formName: any) {
        (this.$refs[formName] as any).resetFields();
    }

    // 导入
    importRow(row: any) {
        this.currentForm = row;
    }

    // 查看
    toDetail(row: any) {
        if (this.form.tabs === '2') {
            localStorage.setItem("childTask", row.childTask);
        }
        this.$router.push({
            name: "VillageDeclareDetail",
            query: {
                id: row.id,
                formId: row.formId,
                assigneeId: row.assigneeId,
                name: row.name || row.formName,
                status: row.status || row.fillStatus,
                description: row.description,
                processInstanceId: row.processInstanceId,
                reason: row.reason,
                descriptionType: row.descriptionType,
                taskType: this.form.tabs === '1' ? "collect" : 'received'
            }
        });
    }

    handleClick() {
        this.pageIndex = 1;
        this.getTable();
    }

    // 填报
    fillInRow(row: any) {
        this.$router.push({
            name: "VillageDeclareFillIn",
            query: {
                rowId: row.id,
                id: row.formId,
                processInstanceId: row.processInstanceId,
                name: row.name,
                description: row.description,
                descriptionType: row.descriptionType
            }
        });
    }

    // 提交
    submitRow(row: any) {
        this.$confirm("是否确认提交任务", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
        })
            .then(async() => {
                const res = await this.$server["task/complete"]({
                    data: {
                        taskId: row.id
                    }
                });
                if (res.data.code === 200) {
                    this.$message.success("操作成功");
                    this.getTable();
                } else {
                    this.$message.error(res.data.message || "接口请求错误!");
                }
            })
            .catch();
    }

    // 指派
    assignRow(row: any) {
        dialogSelect({
            isSingle: true,
            tabs: [
                {
                    label: "村成员",
                    name: "village"
                }
            ],
            sure: async(vm: any, model: any) => {
                if (model.selectedList.length) {
                    this.$confirm(
                        "本任务指派给他人后，您是否仍然保留对当前任务的填报和提交等操作功能。",
                        {
                        confirmButtonText: "不保留",
                        cancelButtonText: "保留",
                        type: "warning"
                        }
                    )
                        .then(async() => {
                            const res = await this.$server["collection/turnTask"]({
                                data: {
                                    taskId: row.id,
                                    userId: model.selectedList[0]
                                }
                            });
                            if (res.data.code === 200) {
                                vm.close();
                                this.getTable();
                                this.$message.success("操作成功");
                            } else {
                                this.$message.error(res.data.message || "接口请求错误!");
                            }
                        })
                        .catch(async(e) => {
                            if (e === 'cancel') {
                                const res = await this.$server["task/child/addProcess"]({
                                    data: {
                                        processInstId: row.processInstanceId,
                                        users: model.selectedList
                                    }
                                });
                                if (res.data.code === 200) {
                                    vm.close();
                                    this.getTable();
                                    this.$message.success("操作成功");
                                } else {
                                    this.$message.error(res.data.message || "接口请求错误!");
                                }
                            }
                        });
                }
            },
            getOptions: (vm: any) => this.getOptions(vm)
        });
    }

    // 获取选项
    async getOptions(vm: any) {
        const res = await this.$server["collection/getGovernmentUser"]({
            data: {
                governmentId: this.authArea.governmentId
            },
            loader: false
        });
        if (res.data.code === 200) {
            const list = res.data.data.filter((item: any) => item.id !== this.user.id && item.orgCategoryId === "9");
            vm.getOptions(res.data.data ? list : []);
        } else {
            vm.getOptions([]);
        }
    }
}
</script>
<style lang="scss" scoped>
::v-deep {
    .page-base-body {
        height: calc(100% - 132px);
    }
    .pbb__search-box {
        background: transparent !important;
    }
    .el-tabs--card > .el-tabs__header {
        border: none;
    }
    .el-tabs--card > .el-tabs__header .el-tabs__nav {
        border: none;
        & > div:nth-child(1) {
            border-radius: 4px 0 0 4px;
            border-right: none;
            border-left: 1px solid #999999;
            border-bottom: 1px solid #999999;
            border-top: 1px solid #999999;
            position: relative;
            &.is-active {
                &::after {
                    content: "";
                    display: block;
                    width: 1px;
                    height: 100%;
                    background-color: #de2728;
                    position: absolute;
                    right: 0;
                    top: 0;
                }
            }
        }
        & > div:nth-child(2) {
            border-radius: 0 4px 4px 0;
            border-left: none;
            border-right: 1px solid #999999;
            border-bottom: 1px solid #999999;
            border-top: 1px solid #999999;
            position: relative;
            &.is-active {
                &::after {
                    content: "";
                    display: block;
                    width: 1px;
                    height: 100%;
                    background-color: #de2728;
                    position: absolute;
                    left: 0;
                    top: 0;
                }
            }
        }
        & > div.is-active {
            border-color: #de2728;
        }
    }
}
.task-manage-container.tab1 {
    height: calc(100% - 117px);
}
.task-manage-container.tab2 {
    height: calc(100% - 60px);
}
.pbb__table {
    .green {
        color: #32A78F;
    }
    .red {
        color: #de2728;
    }
    .yellow {
        color: #f3c14f;
    }
    .blue {
        color: #2c82c9;
    }
}
.tab-card {
    background-color: transparent;
    ::v-deep {
        .theme-gray.el-tabs .el-tabs__header {
            background-color: transparent;
            margin-bottom: 0;
        }
        .el-tabs__nav {
            background-color: #fff;
        }
        .el-tabs__item {
            padding: 0 22px;
            height: 36px;
            line-height: 36px;
        }
    }
}
.tab-item {
    background-color: #fff;
    padding-left: 20px;
    &::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background-color: #f3f3f3;
        z-index: 1;
    }
    ::v-deep {
        .el-tabs__header {
            margin: 0;
        }
        .el-tabs__nav-wrap::after {
            display: none;
        }
        .el-tabs__active-bar {
            height: 1px;
        }
    }
}
</style>
